<template>
<el-drawer title="个人信息" :with-header="false" :visible.sync="isShow" custom-class="drawer_info" :before-close="visibleChange">
    <div class="info_title">个人信息</div>
    <div class="info_t">
        <div class="info_t_banner">
            <img :src="imgUrl" alt />
        </div>
        <div class="info_t_name">
            <div class="info_t_avatar">
                <img :src="personForm.avatar" alt="" v-if="personForm.avatar">
                <i class="iconfont icon-weibiaoti-6-01" style="font-size:90px" v-else></i>
            </div>
            <div>{{personForm.userName}}</div>
        </div>
    </div>
    <div class="info_b">
        <ul class="info_b_list">
            <li>
                <span>登录账号：</span>
                <span>{{personForm.accNo}}</span>
            </li>
            <li>
                <span>用户名称：</span>
                <span>{{personForm.userName}}</span>
            </li>
            <li>
                <span>用户工号：</span>
                <span>{{personForm.userNo}}</span>
            </li>
            <li>
                <span>部门：</span>
                <span>{{personForm.deptName}}</span>
            </li>
            <li>
                <span>岗位：</span>
                <span>{{personForm.postName}}</span>
            </li>
            <li>
                <span>手机：</span>
                <span>{{personForm.phone}}</span>
            </li>
            <li>
                <span>邮箱：</span>
                <span>{{personForm.email}}</span>
            </li>

        </ul>
    </div>
</el-drawer>
</template>

<script>
import drawer from '@/components/BaseTable/drawer'
export default {
    components: {
        drawer,
    },
    props: {
        isShow: {
            type: Boolean,
            default: false,
        },
    },
    watch: {
        isShow: {
            immediate: true,
            handler(val) {
                if (val) {
                    this.getPersonInfo()
                }
            },
        },
    },
    data() {
        return {
            personForm: {},
            imgUrl: require('@/assets/img/banner.png'),
        }
    },
    methods: {
        visibleChange() {
            this.$emit('visibleChange')
        },
        getPersonInfo() {
            this.$http
                .get(
                    `/${this.$ServiceName}/api/external/sysuser/${this.$version}/getuserdetailed`
                )
                .then((res) => {
                    if (res.data.code != '0000') {
                        return this.$message.error(res.data.msg)
                    }
                    this.personForm = res.data.data
                })
        },
    },
}
</script>

<style lang="less" scoped>
ul,
li {
    padding: 0;
    margin: 0;
    list-style: none
}

/deep/ .drawer_info {
    width: 1080px !important;

    .el-drawer__body {
        background: #f5f7fa;
        overflow: auto;
    }

    .info_title {
        display: flex;
        align-items: center;
        border: 1px solid #e1e4eb;
        height: 40px;
        font-size: 16px;
        color: #303133;
        letter-spacing: 0;
        padding-left: 20px;
    }

    .info_t {
        padding: 20px 20px 0 20px;
        position: relative;

        img {
            width: 1040px;
            height: 120px;
            display: block
        }

        .info_t_name {
            font-size: 16px;
            color: #303133;
            letter-spacing: 0;
            position: absolute;
            top: 95px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;

            div:nth-child(2) {
                margin-top: 5px;
            }
        }

        .info_t_avatar {
            width: 90px;
            height: 90px;
            background: #fff;
            border-radius: 50%;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
            }
        }

    }

    .info_b {
        padding: 100px 20px 20px 20px;
        display: flex;
        justify-content: center;
        background: #fff;
        margin: 0 20px 20px;
        min-height: calc(100% - 200px);

        .info_b_list {

            li {
                padding: 10px 0;
                display: flex;

                span:nth-child(1) {
                    width: 100px;
                    text-align: right;
                }

                span {
                    font-size: 14px;
                    color: #606266;
                    letter-spacing: 0;
                    // text-align: right;
                    // line-height: 14px;
                }
            }
        }

    }
}
</style>
